<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<% 
	String path=request.getContextPath(); 
	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	request.setAttribute("basePath", basePath);
	//http://localhost:8080/happylife/
	//${basePath}user/login.do
	/* String userName = "Login";
	String str = "Sign Up";
	if((String)session.getAttribute("LoginUserName")!=null){
		userName = (String)session.getAttribute("LoginUserName");
		str = "Exit";
	} */
%>
<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
	Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	
	<link href="${basePath}view/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="${basePath}view/css/memenu.css" rel="stylesheet" type="text/css" media="all" />
	<link href="${basePath}view/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="${basePath}view/css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
	
	<script src="${basePath}view/js/jquery.min.js"></script>
	<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }</script>
	<script type="text/javascript" src="${basePath}view/js/memenu.js"></script>
	<script>$(document).ready(function(){$(".memenu").memenu();});</script>
	<script src="${basePath}view/js/simpleCart.min.js"></script>
	<script src="${basePath}view/js/responsiveslides.min.js"></script>
	<script  type="text/javascript">
		$(function () {
			// 发送ajax 查询
			$.post("${basePath}category/find.do",{"method":"finAll"},function(obj){
				//alert(obj);
				$(obj).each(function(){
					//alert(this.cname);
					$("#c_ul").append("<li><a href='#'>"+ this.cname +"</a></li>");
				});
			},"json");
	    	$("#slider").responsiveSlides({
	      		auto: true,
	      		speed: 500,
	        	namespace: "callbacks",
	        	pager: true,
	    	});
	    });
	 </script>
</head>
<body>
	<!-- header -->
	<div class="header">
		<div class="header-top">
			<div class="container">
				<div class="col-sm-4 world"></div>
				<div class="col-sm-4 logo">
					<a href="${basePath}index.jsp"><img src="${basePath}view/image/logo.png" alt=""></a>	
				</div>
				<div class="col-sm-4 header-left">
						<c:if test="${empty LoginUserName}">
							<p class="log">
								<a href="${basePath}view/login.jsp">Login</a>
								<span>or</span>
								<a href="${basePath}view/register.jsp">Sign&nbsp;Up</a>
							</p>
							<div class="cart box_1"></div>
							<div class="clearfix"></div>
						</c:if>
						<c:if test="${not empty LoginUserName}">
							<p class="log">
								<a href="${basePath}index.jsp">你好:${LoginUserName}!</a>
								<span>or</span>
								<a href="${basePath}user/exit.do">Exit</a>
							</p>
							<div class="cart box_1">
								<div class="total">
									<h3> 
										<a href="${basePath}view/shoppingCart.jsp">
											<img src="${basePath}view/images/cart.png" alt=""/>
										</a>
									</h3>
								</div>
								<p><a href="javascript:void(0);" onclick="clearCart()" class="simpleCart_empty">Empty Cart</a></p>
							</div>
							<div class="clearfix"> </div>
						</c:if>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="container">
			<div class="head-top">
				<div class="col-sm-2 number"></div>
			 	<div class="col-sm-8 h_menu4">
					<ul class="memenu skyblue" id="c_ul">
						 
			  		</ul> 
		  		</div>
				<div class="col-sm-2 search">
					<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"></i></a>
				</div>
				<div class="clearfix"></div>
				<!---pop-up-box---->
				<script src="${basePath}view/js/jquery.magnific-popup.js" type="text/javascript"></script>
				<!---//pop-up-box---->
				<div id="small-dialog" class="mfp-hide">
					<div class="search-top">
						<div class="login">
							<input type="submit" value="">
							<input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}">		
						</div>
						<p>	Shopping</p>
					</div>				
				</div>
				<script>
					$(document).ready(function() {
					$('.popup-with-zoom-anim').magnificPopup({
						type: 'inline',
						fixedContentPos: false,
						fixedBgPos: true,
						overflowY: 'auto',
						closeBtnInside: true,
						preloader: false,
						midClick: true,
						removalDelay: 300,
						mainClass: 'my-mfp-zoom-in'
					});
																					
					});
				</script>	
			</div>
		</div>
	</div>
	<!-- //header -->
	<!--banner-->
	<div class="banner">
		<div class="col-sm-3 banner-mat">
			<img class="img-responsive"	src="${basePath}view/images/ba1.jpg" alt="">
		</div>
		<div class="col-sm-6 matter-banner">
	 		<div class="slider">
	    		<div class="callbacks_container">
	      			<ul class="rslides" id="slider">
	        			<li>
	          				<img src="${basePath}view/images/1.jpg" alt="">
		       			 </li>
				 		 <li>
		          			<img src="${basePath}view/images/2.jpg" alt="">   
		       			 </li>
						 <li>
		          			<img src="${basePath}view/images/1.jpg" alt="">
		        		</li>	
	      			</ul>
	 	 		</div>
			</div>
		</div>
		<div class="col-sm-3 banner-mat">
			<img class="img-responsive" src="${basePath}view/images/ba.jpg" alt="">
		</div>
		<div class="clearfix"></div>
	</div>
	<!--//banner-->
	<!--content-->
	<div class="content">
		<div class="container">
			<div class="content-top">
				<h1>Recent Products</h1>
				<div class="content-top1">
					<c:forEach items="${pList}" var="p">
						<div class="col-md-3 col-md2">
							<div class="col-md1 simpleCart_shelfItem">
								<a href="${basePath}product/show.do?pid=${p.pid}">
									<img style="width:300px; height:330px;" class="img-responsive" src="${basePath}view/${p.pimage}" alt="" />
								</a>
								<h3>${fn:substring(p.pname,0,10)}</h3>
								<div class="price">
										<h5 class="item_price">&yen;${p.price}</h5>
										<a href="${basePath}product/show.do?pid=${p.pid}">Detail</a>
										<div class="clearfix"></div>
								</div>
							</div>
						</div>
					</c:forEach>
				</div>	
			</div>
		</div>
	</div>
	<!--//content-->
</body>
	<script type="text/javascript">
		function clearCart(){
			if(confirm("您确定要清空购物车吗？")){
				location.href="${basePath}cart/clear.do";
			}
		}
	</script>
</html>